<template>
	<div class="banner">
		<van-swipe :height="220" class="my-swipe" :autoplay="3000" indicator-color="white" loop>
			<van-swipe-item v-for="(item,index) in bannerData" :key="item.pid" @click="goDetail(item.pid)">
				<span class="banner_title">{{item.name}}</span>
				<img v-lazy="item.bannerImg" :alt="item.name">
			</van-swipe-item>
		</van-swipe>
	</div>
</template>

<script>
	import {
		getBanner
	} from '@/api/home.js'
	export default {
		name: 'Banner',
		data() {
			return {
				// 轮播图数据数组
				bannerData: []
			}
		},
		created() {
			this._getBanner()
		},
		methods: {
			// 获取轮播图
			_getBanner() {
				getBanner()
				.then(res => {
					if (res.data.code !== 300) return this.$toast.fail('获取数据异常,请重新刷新!')
					this.bannerData = res.data.result
				})
				.catch(err => {
					return this.$toast.fail('获取数据失败,请重新刷新!')
				})
			},
			// 跳转详情页面
			goDetail(pid) {
				this.$router.push({name: 'Detail', params: {pid}})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.banner {
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 1px 1px 5px 2px #ccc;
		margin: 10px;

		.my-swipe {
			.van-swipe-item {
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

				.banner_title {
					position: absolute;
					background-color: rgba($color: #fff, $alpha: 0.19);
					padding: 2px 5px;
					left: 10px;
					top: 22px;
					border-radius: 5px;
					color: #fff;
					font-weight: bold;
					font-size: 16px;
				}
			}
		}
	}
</style>
